<template>
    <div class="comment-component">
        <h3>发表评论</h3>
        <hr>
        <textarea name="comment" id="comment" maxlength="120" placeholder="请输入评论内容" v-model="msg"></textarea>
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" @click="postComment">发表评论</button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in comment" :key="i">
                <div class="cmt-title">
                    第{{i+1}}楼 用户：{{item.user_name}} &nbsp;&nbsp; 发表时间：{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-content">{{item.content === 'undefined' ? '这个用户懒，啥都没写' : item.content}}</div>
            </div>
            <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            getApi: "api/getcomments/",            
            postApi: "api/postcomment/",            
            pageindex: 1,  //默认请求并展示的评论列表为第一页
            comment: [],    //存储get方式请求回来的评论内容
            msg: ""             //存储textarea输入的内容
        }
    },
    created() {
        this.getComment();
    },
    methods: {
        getComment(){
            this.$http.get(this.getApi + this.id + '?pageindex=' + this.pageindex).then( result => {
                // console.log(result);
                if(result.body.status === 0){
                    this.comment = this.comment.concat(result.body.message);
                }else{
                    Toast("评论列表请求失败！")
                }                
            })
        },
        getMore(){
            this.pageindex += 1;
            this.getComment();
        },
        postComment(){
            if(this.msg.trim().length === 0){
                return Toast("评论内容不能为空");
            }            
            this.$http.post(this.postApi + this.id, {     //这里的id来源于props:["id"]
                content: this.msg.trim()
                }).then(result =>{
                if(result.body.status === 0){
                    //拼接出一个评论对象，然后unshift到评论列表中（最前端显示）
                    var cmt_mine = {
                        user_name: '匿名用户',
                        add_time: Date.now(),
                        content: this.msg.trim()
                    };
                    this.comment.unshift(cmt_mine);
                    this.msg = "";
                    Toast(result.body.message);   //如果提交成功，服务器会返回message：“评论提交成功”

                }else{
                    Toast('评论提交失败！')
                }
            })
        }
    },
    props: ["id"]   //调用的父组件会传递过来id，而在本组件内部，有两个地方调用了：1.getComment()  2.postComment()

}
</script>
<style lang="scss" scoped>
.comment-component{
    h3{
        font-size: 18px;
    }
    #comment{
        margin-bottom: 0!important
    }
    .mui-btn-block{
        padding: 10px 0;
    }

    .cmt-list{
        margin:5px 0;
        .cmt-title{
            font-size: 13px;
            line-height: 30px;
            color: #fff;
            background-color:#676b68;
        }
        .cmt-content{
            line-height: 35px;
            text-indent: 2em;
        }
    }
}
</style>
